<template>
	<div class="note-card-com w-full">
		<nuxt-link :to="`/details/${id}`">
			<el-card shadow="hover">
				<div class="note-card w-full h-full flex items-center justify-center">
					<!-- 封面 -->
					<div
						class="cover rounded-sm overflow-hidden w-[30%] h-[190px] bg-no-repeat bg-cover bg-center"
						:style="{
							backgroundImage: `url(${cover})`,
						}"></div>
					<!-- 详情 -->
					<div class="details ml-3 w-[70%]">
						<div class="title truncate w-full">
							<span class="font-bold text-xl text-blue-500"> {{ title }} </span>
						</div>
						<div class="publish-date mt-2 w-full truncate">
							<span class="text-sm text-blue-600">{{ date }}</span>
						</div>
						<div class="content mt-2">
							<p class="text-blue-500">
								{{ content }}
							</p>
						</div>
					</div>
				</div>
			</el-card>
		</nuxt-link>
	</div>
</template>

<script lang="ts">
export default defineComponent({
	name: 'NoteCard',
	props: {
		id: String,
		cover: String,
		title: String,
		date: String,
		content: String,
	},
});
</script>

<style lang="scss" scoped>
@media screen and (max-width: 1080px) {
	.note-card {
		flex-direction: column;

		.cover {
			width: 100%;
			height: 200px;
		}

		.details {
			width: 100%;
			margin-top: 10px;

			* {
				margin-left: 0;
			}
		}
	}
}
</style>
